<template>
  <div class="safety-determine">
    <div class="title"></div>
    <div class="main">
      <div>
        <FireArea />
      </div>
      <div>
        <FireLevel />
      </div>
      <div>
        <DisasterEvents />
      </div>
      <div>
        <FireCause />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import FireArea from './fireArea/index.vue';
import FireLevel from './fireLevel/index.vue';
import DisasterEvents from './disasterEvents/index.vue';
import FireCause from './fireCause/index.vue';

defineComponent({ name: 'SafetyDetermine' });
</script>

<style scoped lang="scss">
.safety-determine {
  @apply w-full h-full flex flex-col justify-between;

  .title {
    @apply w-full h-[57px];
    background: url('./assets/title.png') no-repeat center;
  }

  .main {
    @apply h-[calc(100%-70px)] grid grid-cols-2 grid-rows-2 gap-[48px];
  }
}
</style>
